<!DOCTYPE html>
<html xmlns:javascrip="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <!--<link rel="stylesheet" href="../../lib/layui/css/layui.css"  media="all">-->
</head>
<style>
    /*媒体查询 小于750 的样式*/
    @media screen and (max-width: 999px) {
        .mid{
            width: 100%;
            text-align: center;
            margin-top: 10px;
        }
    }

</style>
<body>

<div class="layui-card">
    <div  class="layui-form layui-card-header layuiadmin-card-header-auto">

        <!--<button class="layui-btn add" style="background-color: #2f9833;border-radius:5px;right: 15px;float: right">新增用户</button>-->


        <form action="">
            <div class="layui-inline" >
                <label class="layui-form-label">数据源名称</label>
                <div class="layui-input-inline">
                    <input type="text" id="data_name"  autocomplete="off" class="layui-input">
                </div>
                <!--<i id="search" style="width: 36px;height: 36px;display:inline-block;vertical-align:middle;border:1px solid #dddddd;border-radius:6px;background: url('../../img/search.png') #ffffff no-repeat;background-size: 100% 100%;"></i>-->
            </div>

            <div class="layui-inline" >

                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </form>
    </div>

    <div class="layui-card-body">

            <div class="layui-inline mid">
                <button class="layui-btn add" >
                    新增数据源
                </button>
                <button class="layui-btn layuiadmin-btn-order" id="search" lay-submit="" lay-filter="LAY-app-order-search">
                    <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                </button>

            </div>

        <table id="demo"  lay-filter="xx">
        </table>
    </div>
</div>
    <script type="text/html" id="barDemo">
        {{#  if(d.status == 'wait_issue'){ }}
        <a class="layui-btn  layui-btn-xs" lay-event="issue">发布</a>
        {{#  }else if(d.status == 'issued'){ }}
        <dd class="layui-btn layui-btn-primary  layui-btn-xs" >已发布</dd>
        {{#  } }}
    </script>


<script src="/js/include.js" type="text/javascript" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
    var table_name = "data_source_info";


    //layui 表格
    layui.use('table', function(){
        //表格数据装载
        var table = layui.table;
        table.render({
            id: 'idTest',
            url:'/layui/table/list',
            method:'post',
            where: {resource_name:table_name, querydata: JSON.stringify({username:$("#title").val()})},
            page:true,
            limits:[10,20],
            limit:10,
            elem: '#demo', //指定原始表格元素选择器（推荐id选择器）
            height: 515 ,//容器高度
            cols: [[
                {field: 'name', title: '数据源名称',width:240},
                {field: 'prefix_name', title: '数据源前缀',width:240},
//                {field: 'data_type', title: '数据库类型',width:120},
//                {field: 'username', title: '数据库用户名',width:120},
//                {field: 'password', title: '数据库密码',width:120},
//                {field: 'url', title: '数据库url',width:120},
//                {field: 'driver_class_name', title: '数据库驱动名',width:120},
                {field: 'create_time', title: '创建时间',width:120},
                {fixed: 'right', width:120, align:'center', toolbar: '#barDemo'}]], //设置表头

            response:{
                statusName: 'success', //数据状态的字段名称，默认：code
                statusCode: true ,//成功的状态码，默认：0
                msgName: 'message', //状态信息的字段名称，默认：msg
                countName: 'count', //数据总数的字段名称，默认：count
                dataName: 'data' //数据列表的字段名称，默认：data
            }
            //,…… //更多参数参考右侧目录：基本参数选项
        });
        //监听工具条
        table.on('tool(xx)', function tata(obj){

            var data = obj.data,layEvent = obj.event;
            if(layEvent === 'detail'){
                //save(data.id);
                var index = layer.open({
                    type: 2,
                    content: '/html/data_source/data_source_from.html?id='+data.id,
                    area: ['90%', '90%'],
                    maxmin: false
                });

            } else if(layEvent === 'issue'){
//                layer.msg("暂不支持删除操作");
//                return false;
                //layer.confirm('真的删除行么', function(index){
                    $.ajax({
                        url:"/dbm/data_source/issue",
                        type:"post",
                        data:{id:data.id},
                        async:false,
                        success:function (data) {
                            if(data.success){
                                layer.msg(data.data)
                                query();
                            }else {
                                layer.msg(data.message)
                            }
                        }
                    })
                    layer.close(index);
                    //向服务端发送删除指令
                //});
            }
//            else if(layEvent === 'assigned'){
//                var index = layer.open({
//                    type: 2,
//                    title:"角色分配",
//                    content: '/html/user_assigned/layui_from.html?id='+data.id+"&username="+data.username,
//                    area: ['320px', '195px'],
//                    maxmin: false
//                });
//            }
//            layer.full(index);
        });
    });
    //layui 上传
    layui.use('upload', function() {
        var $ = layui.jquery
                , upload = layui.upload;
        //拖拽上传
        upload.render({
            elem: '#upload',
            url: '/demo/table/upload/',
            accept: 'file', //普通文件
            exts: 'xls|xlsx', //只允许上传excl文件
            done: function(res){
                if(res.success){
                    layer.msg(res.message);
                }else {
                    layer.msg(res.message,{time:8000});
                }

            }
        });
    });

    //编辑后 不刷新 更新选中数据
     function renovation (data) {
         var b=false;
         if(data.id){
             for(var key in data){
                 $(".layui-table-click td[data-field='"+key+"'] div").html(data[key])
             }
         }else {
             query();
         }
         layer.msg("提交成功",{time:5000})
    }
    //查询
    $("#search").click(function () {
        query();
    })
    //新增
    $(".add").click(function () {
        save();
    })
    //导入
    $(".upload").click(function () {

    })
    //保存共用方法
    function save (id) {
        id=(id==undefined)?(""):("?id="+id);
        var index = layer.open({
            type: 2,
            content: '/html/data_source/data_source_from.html'+id,
            area: ['90%', '90%'],
            maxmin: false
        });
        //layer.full(index);
    }
    //查询共用方法
    function query () {
        var table = layui.table;
        var QueryParam= new Object();
        if($("#data_name").val()){
            QueryParam.fuzzy={data_name:$("#data_name").val()};
        }
        table.reload('idTest', {
            where: {resource_name:table_name, querydata: JSON.stringify(QueryParam)}
        });
    }
</script>
</body>
</html>